.main{
	width: 100%;
	padding-left: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	margin-top: -60px;
	.title{
		line-height: 40px;
		border-bottom: 1px solid #202657;
		position: relative;
		 background-image:-webkit-linear-gradient(bottom,#005aff,#3bf5fc);
		-webkit-background-clip:text;		
		-webkit-text-fill-color:transparent;
		font-size: 18px;
		font-weight: bold;
		img{
			vertical-align: -2px;
		}
		&::before{
			content: '';
			position: absolute;
			left: 0;
			bottom: -1px;
			width: 110px;
			height: 2px;
			background-image: linear-gradient(to right, #005aff , #3bf5fc);
		}
	}
	.center{
		width:820px;
		// width: calc(100% - 1100px);
		height: 100%;
		float: left;
		margin: 0 20px;
		.subtitle{
			color: #1b86ff;
			font-size: 16px;
			background: url(../img/line.png) no-repeat bottom center;
			background-size: 100%;
			line-height: 40px;
		}
		.box1{
			padding-top: 5px;
			padding-bottom: 10px;
			.b-left{
				width: 360px;
				float: left;
				margin-left: 35px;
				.item1{
					.thead{
						width: 100%;
						height: 31px;
						background: url(../img/head.png) no-repeat center;
						font-size: 0;
						line-height: 31px;
						margin-bottom: 8px;
						margin-top: 10px;
						span{
							display: inline-block;
							text-align: center;
							color: #1b86ff;
							font-size: 14px;
							overflow: hidden;
							&:nth-child(1){
								width: 105px;
							}
							&:nth-child(2){
								width:85px;
							}
							&:nth-child(3){
								width: 85px;
							}
							&:nth-child(4){
								width: 85px;
							}
						}
					}
					.scroll{
						margin-top: 8px;
						height: 150px;
						overflow: hidden;
					}
					ul{
						li{
							height: 38px;
							p{
								height: 30px;
								line-height: 30px;
								color: #1b86ff;
								font-size: 0px;
								border-radius: 30px 0 0 30px;
								box-sizing: border-box;
								background-image: linear-gradient(to right, rgba(0,158,253,0.15) , rgba(0,158,253,0));
								position: relative;
								&::before{
									content: '';
									position: absolute;
									top: 15px;
									left: 13px;
									width: 2px;
									height: 40px;
									background: rgba(27,134, 255,0.3);
								}								
							}							
							&:last-child{
								p{
									&::before{
										content: '';
										width: 2px;
										height: 0px;
									}
								}							
							}
							span{
								font-size: 14px;
								text-align: center;
								display: inline-block;
								text-overflow:ellipsis;
								white-space: nowrap;
								overflow: hidden;
								&:nth-child(1){
									width: 8px;
									height: 8px;
									border-radius: 8px;
									background: #1b86ff;
									margin-left:10px;
									vertical-align: 11px;
								}
								&:nth-child(2){
									width: 87px;
								}
								&:nth-child(3){
									width: 85px;
								}
								&:nth-child(4){
									width: 85px;
								}
								&:nth-child(5){
									width:85px;
								}
							}
							&.active{
								p{
									background-image: linear-gradient(to right, rgba(255,59,101,0.15) , rgba(255,59,101,0));
								}	
								span{
									color: #ff3b65;
									&:nth-child(1){
										background: #ff3b65;
									}
								}							
							}
						}
					}
				}
				.item2{
					.thead{
						width: 100%;
						height: 31px;
						background: url(../img/head.png) no-repeat center;
						font-size: 0;
						line-height: 31px;
						margin-bottom: 8px;
						margin-top: 10px;
						span{
							display: inline-block;
							text-align: center;
							color: #1b86ff;
							font-size: 14px;
							overflow: hidden;
							&:nth-child(1){
								width: 130px;
							}
							&:nth-child(2){
								width:230px;
							}
						}
					}
					.scroll{
						margin-top: 8px;
						height: 150px;
						overflow: hidden;
					}
					ul{
						li{
							height: 38px;
							p{
								height: 30px;
								line-height: 30px;
								color: #1b86ff;
								font-size: 0px;
								border-radius: 30px 0 0 30px;
								box-sizing: border-box;
								background-image: linear-gradient(to right, rgba(0,158,253,0.15) , rgba(0,158,253,0));
								position: relative;
								&::before{
									content: '';
									position: absolute;
									top: 15px;
									left: 13px;
									width: 2px;
									height: 40px;
									background: rgba(27,134, 255,0.3);
								}								
							}							
							&:last-child{
								p{
									&::before{
										content: '';
										width: 2px;
										height: 0px;
									}
								}							
							}
							span{
								font-size: 14px;
								text-align: center;
								display: inline-block;
								text-overflow:ellipsis;
								white-space: nowrap;
								overflow: hidden;
								&:nth-child(1){
									width: 8px;
									height: 8px;
									border-radius: 8px;
									background: #1b86ff;
									margin-left:10px;
									vertical-align: 11px;
								}
								&:nth-child(2){
									width: 117px;									
								}
								&:nth-child(3){
									width: 220px;
								}
							}
							&.active{
								p{
									background-image: linear-gradient(to right, rgba(255,59,101,0.15) , rgba(255,59,101,0));
								}	
								span{
									color: #ff3b65;
									&:nth-child(1){
										background: #ff3b65;
									}
								}							
							}
						}
					}
				}
			}
			.b-right{
				width: 360px;
				float: left;
				margin-left: 30px;
				.thead{
					width: 100%;
					height: 31px;
					background: url(../img/head.png) no-repeat center;
					font-size: 0;
					line-height: 31px;
					margin-bottom: 8px;
					margin-top: 10px;
					span{
						display: inline-block;
						text-align: center;
						color: #1b86ff;
						font-size: 14px;
						overflow: hidden;
						&:nth-child(1){
							width: 240px;
						}
						&:nth-child(2){
							width:120px;
						}
					}
				}
				.scroll{
					margin-top: 8px;
					height: 380px;
					overflow: hidden;
				}
				ul{
					li{
						height: 38px;
						p{
							height: 30px;
							line-height: 30px;
							color: #1b86ff;
							font-size: 0px;
							border-radius: 30px 0 0 30px;
							box-sizing: border-box;
							background-image: linear-gradient(to right, rgba(0,158,253,0.15) , rgba(0,158,253,0));
							position: relative;
							&::before{
								content: '';
								position: absolute;
								top: 15px;
								left: 13px;
								width: 2px;
								height: 40px;
								background: rgba(27,134, 255,0.3);
							}								
						}							
						&:last-child{
							p{
								&::before{
									content: '';
									width: 2px;
									height: 0px;
								}
							}							
						}
						span{
							font-size: 14px;							
							display: inline-block;
							text-overflow:ellipsis;
							white-space: nowrap;
							overflow: hidden;
							&:nth-child(1){
								width: 8px;
								height: 8px;
								border-radius: 8px;
								background: #00fffc;
								margin-left:10px;
								vertical-align: 11px;
							}
							&:nth-child(2){
								width: 217px;
								padding-left: 10px;
								box-sizing: border-box;
							}
							&:nth-child(3){
								width: 120px;
								text-align: center;
							}
						}
					}
				}
			}
		}
		.box2{
			.b-left{
				width: 280px;
				float: left;
				padding-top: 15px;
				padding-left: 20px;
				.lis1{					
					li{
						width: 260px;
						height: 60px;
						line-height: 60px;
						padding-left: 20px;
						box-sizing: border-box;
						margin-bottom: 10px;
						p{
							line-height: 20px;
							font-size: 14px;
							color: #fff;						
							&.f1{
								font-size: 24px;
								color: #ffb817;
							}
							&.f2{
								font-size: 24px;
								color: #0ee9a2;
							}
							&.f3{
								font-size: 24px;
								color: #53a4ff;
							}
						}
					}
					.bg1{
						background: url(../img/bg1.png) no-repeat center;
						background-size: 100%;
					}
					.bg2{
						background: url(../img/bg2.png) no-repeat center;
						background-size: 100%;
					}
					.bg3{
						background: url(../img/bg3.png) no-repeat center;
						background-size: 100%;
					}
					.img{
						float: left;
					}
					.tit{
						float: left;
						width: 80px;
						text-align: right;
						font-size: 14px;
						color: #fff;
					}
					.p1{
						float: left;
						width: 55px;
						text-align: center;
						padding-top: 10px;
					}
					.p2{
						float: left;
						width: 55px;
						text-align: center;
						padding-top: 10px;
					}
				}
				.lis2{
					.len{
						width: 260px;
						margin-top: 20px;
						margin-bottom: 10px;
						ul{
							li{
								float: left;
								width: 50%;
								text-align: center;
								font-size: 14px;
								color: #fff;
								line-height: 24px;
								span{
									display: inline-block;
									width: 8px;
									height: 8px;
									border-radius: 100%;
									vertical-align: middle;
								}
								.bg1{
									background: #22d019;
								}
								.bg2{
									background: #0dd4ff;
								}
							}
						}
					}
					.body{					
						li{
							
						}
						.item1{
							float: left;
							width: 32px;
							color: #fff;
							font-size: 14px;
							line-height: 40px;
						}
						.item2{
							float: left;
							font-size: 18px;
							color: #f3a500;
							width: 205px;
							text-align: center;
							p{						
								.col1{
									color: #22d019;
								}
								.col2{
									color: #0dd4ff;
								}
								&:last-child{
									width: 100%;
									height: 6px;
									border-radius: 6px;
									background: #382090;
									span{
										display: block;
										width: 90%;
										height: 6px;
										border-radius: 6px;
										background: #22d019;
									}
								}
							}
						}
						.item3{
							float: left;
							font-size: 18px;
							color: #ffb200;
							line-height: 40px;
							margin-left: 5px;
						}
					}
				}
			}
			.b-right{
				width: 520px;
				float: left;
				.lis1{
					width: 100%;
					height: 210px;
				}
				.lis2{
					width: 100%;
					height: 210px;
				}
			}
		}
		.box3{
			
		}
	}
	.left{
		float: left;
		width: 488px;
		box-sizing: border-box;
		background: rgba(17,5,91,0.1);		
		.box1{
			padding-top: 32px;
			padding-bottom: 20px;
			ul{
				li{
					float: left;
					width: 200px;
					height: 64px;
					background: url(../img/bg11.png) no-repeat center;
					background-size: 100%;
					margin-left: 28px;
					box-sizing: border-box;					
					.img{
						float: left;
						width: 90px;
						text-align: center;
						line-height: 64px;
					}
					.data{
						float: left;
						text-align: center;
						font-size: 16px;
						color: #3a7efe;
						padding-top: 6px;
						.fs12{
							font-size: 12px;
						}
						.fs28{
							font-size: 28px;
						}
						p{
							&:last-child{
								color: #fff;
							}
						}
					}
				}
			}
			
		}
		.box2{
			width: 100%;
			height: 210px;
		}
		.box3{
			width: 100%;
			height: 210px;
		}
		.box4{
			width: 100%;
			height: 210px;
		}
		.box5{
			width: 100%;
			height: 210px;
		}
	}
	.right{
		float: right;
		width: 540px;
		box-sizing: border-box;		background: rgba(17,5,91,0.1);	
		.subtitle{
			color: #1b86ff;
			font-size: 16px;
			background: url(../img/line.png) no-repeat bottom center;
			background-size: 100%;
			line-height: 40px;
		}
		.box1{
			.b-left{
				width: 50%;
				height: 200px;
				float: left;
				.inner{
					margin:0px auto;
					text-align: center;
					width: 100%;
					height: 210px;
					overflow: hidden;
					background: url(../img/bg12.png) no-repeat center;
					position: relative;
					box-sizing: border-box;
					padding-top: 80px;
					color: #00f6ff;
					font-size: 16px;
					.ziti{
						font-size: 36px;
					}
					.zhuan{
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: url(../img/zhuan2.png) no-repeat center;
						animation: myzhuan 6s infinite linear;
						-webkit-animation: myzhuan 6s infinite linear;
						-moz-animation: myzhuan 6s infinite linear;
					}
				}
			}
			.b-right{
				width: 50%;
				height: 200px;
				float: left;
				padding-top: 34px;
				li{
					width: 250px;
					height: 54px;
					background: rgba(41,58,196,0.2);
					border-radius: 10px;
					line-height: 54px;
					font-size: 0;
					margin-bottom: 10px;
					span{
						display: inline-block;
						width: 33%;
						vertical-align: top;
						text-align: center;
						font-size: 16px;
						color: #fff;
						font{
							font-size: 24px;
						}
						&.col1{
							color: #22e27e;
						}
						&.col2{
							color: #ffc33c;
						}
						&.col3{
							color: #ff3560;
						}
					}
				}
			}
		}
		.box2{
			.b-left{
				width: 50%;
				height: 200px;
				float: left;				
			}
			.b-right{
				width: 50%;
				float: left;
				// padding-top: 34px;
				ul{
					padding-top: 20px;
				}
				.item1{
					float: left;
					width: 250px;
					margin-bottom: 10px;					
					p{
						font-size: 0;
						&:first-child{
							span{
								font-size: 14px;
								color: #00baff;	
								display: inline-block;
								width: 33%;
								&:nth-child(2){
									text-align: center;
									font-size: 18px;
									color: #fff;
								}
								&:last-child{
									font-size: 12px;
									text-align: right;
								}
							}
						}
						&:last-child{
							margin-top: 3px;
							width: 100%;
							height: 11px;
							border-bottom: 1px solid #084a9d;
							span{
								display: block;								
								height: 6px;								
							}
							.bg1{
								width: 58%;
								background: #00baff;
							}
							.bg2{
								width: 89%;
								background: #ff8400;
							}
							.bg3{
								width: 83%;
								background: #0ed966;
							}
							.bg4{
								width: 86%;
								background: #6054ff;
							}
						}						
					}
				}
			}
		}
		.box3{
			.b-left{
				float: left;
				width: 50%;
				height: 240px;
				background: url(../img/bg13.png) no-repeat center;
			}
			.b-right{
				float: left;
				width: 50%;
				height: 240px;	
				overflow: hidden;
				background: url(../img/ball1.png) no-repeat center;
				position: relative;
				.zhuan{
					position: absolute;
					left: 0px;
					top: 0px;
					right: 0;
					bottom: 0;
					background: url(../img/zhuan1.png) no-repeat center;
					background-size: 133px;
					animation: myzhuan 6s infinite linear;
					-webkit-animation: myzhuan 6s infinite linear;
					-moz-animation: myzhuan 6s infinite linear;
				}
			}
		}
		.box4{
			width: 100%;
			height: 235px;
		}
	}
}

